<template>
  <div v-if="isMap" class="content-box">
    <div v-for="(bar, index) in datas" :key="index" class="bar clearfix">
      <div class="lf">
        <span @click="goto(bar)">[{{ bar.name }}]</span>
      </div>
      <div class="rt">
        <div
          v-for="(item, index) in bar.thirdTypeVos"
          :key="index"
          class="cell"
        >
          <span @click="goto(item)">{{ item.name }}</span>
        </div>
      </div>
    </div>
  </div>
  <div style="padding: 20px" v-else>
    <div style="display: flex">
      <div
        style="
          font-size: 18px;
          font-weight: bold;
          cursor: pointer;
          margin-right: 20px;
        "
      >
        <div
          style="
            width: 140px;
            height: 40px;
            line-height: 40px;
            padding-left: 20px;
          "
          v-for="(item, index) in navigations"
          :key="index"
          @click="tabClick(item.id)"
          :class="id == item.id ? 'active' : ''"
          v-show="item.code != 'web_map'"
        >
          {{ item.title }}
        </div>
      </div>
      <div>
        <div
          style="
            font-size: 20px;
            font-weight: bold;
            width: 100px;
            text-align: center;
            border-bottom: 4px solid #47b752;
            margin-bottom: 20px
          "
        >
          {{ title }}
        </div>
        <div
          v-html="datas.content"
          style="background-color: #fff; padding: 20px; border-radius: 8px"
        ></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
const router = ref(useRouter());
const params = ref(useRoute().params);
const datas = ref([]);
const isMap = ref(false);
const title = computed(() => datas.value.title);
const id = useRoute().params.id;
const navigations = ref(null);
axios.get("/api/download/common/navigations").then((res) => {
  navigations.value = res.data.data.navigations;
});
axios.get(`/api/download/common/detail/${id}.html`).then((res) => {
  datas.value = res.data.data.typeVos || res.data.data.dictionary;
  isMap.value = res.data.data.crumbs === "网站地图";
});
const tabClick = (id) => {
  router.value.push({
    name: "map",
    params: {
      id: id,
    },
  });
  axios.get(`/api/download/common/detail/${id}.html`).then((res) => {
    datas.value = res.data.data.typeVos || res.data.data.dictionary;
    isMap.value = res.data.data.crumbs === "网站地图";
  });
};
// const title = () => {
//   return navigations.value.find((i) => {
//     return i.id === id;
//   }).title;
// };
const goto = (item) => {
  if (item.state === 1) {
    window.open(
      `#/page/${item.url}${item.url.split("_").length === 4 ? "_1" : ""}.html`
    );
  } else if (item.state === 2) {
    if (item.url.includes("409")) {
      let arr = item.url.split("409");
      window.open(
        `/#/game/alone-list_${arr[0]}${
          item.url.split("_").length === 4 ? "409_" : ""
        }${item.id}${arr[1]}.html`
      );
    }
    if (item.url.includes("397")) {
      let arr = item.url.split("397");
      window.open(
        `/#/game/alone-list_${arr[0]}${
          item.url.split("_").length === 4 ? "397_" : ""
        }${item.id}${arr[1]}.html`
      );
    }
    if (item.url.includes("410")) {
      let arr = item.url.split("410");
      window.open(
        `/#/game/web-list_${arr[0]}${
          item.url.split("_").length === 4 ? "410_" : ""
        }${item.id}${arr[1]}.html`
      );
    }
  } else if (item.state === 3) {
    let arr = item.url.split("407");
    window.open(
      `/#/game/mobile-index_${arr[0]}${
        item.url.split("_").length === 3 ? "407_" : ""
      }${item.id}${arr[1]}.html`
    );
  } else if (item.state === 4) {
    console.log(item);
    window.open(
      `/#/information/list_${item.url}.html`
    );
  } else {
    console.log(item);
  }
};
</script>

<style lang="less" scoped>
.content-box {
  width: 1200px;
}
.bar {
  padding: 10px 20px;
  border-bottom: 1px solid #eee;
}
.lf {
  height: 35px;
  line-height: 35px;
  width: 100px;
  float: left;
  color: @link-color;
  span {
    cursor: pointer;
    &:hover {
      color: red;
    }
  }
}
.rt {
  float: left;
  width: calc(100% - 100px);
  .cell {
    display: inline-block;
    cursor: pointer;
    height: 35px;
    line-height: 35px;
    width: calc(100% / 8);
    color: #545759;
    text-align: center;
    span {
      &:hover {
        color: red;
        text-decoration: underline;
      }
    }
  }
}
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.active {
  background-color: #47b752;
  color: #fff;
  &::after {
    content: "";
    display: inline-block;
    position: relative;
    right: -45px;
    top: -3px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid @link-color;
    font-size: 0;
    line-height: 0;
    vertical-align: middle;
    transform: rotate(90deg);
  }
}
</style>